<ion-header class="nav-header">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="backClick()">
        <ion-icon class="md-arrow-back" ios="md-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>账户充值</ion-title>
    <ion-buttons slot="end" (click)="toKefu()">
      <div style="padding: 4px; border: 1px solid #fff; border-radius: 4px; color: #fff; font-size: 14px;">联系客服</div>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="accountrecharge">
  <div class="header-div">
    当前账号:{{nickName}}
  </div>
  <div style="height: 40px;"></div>
  <div class="section-tit">
    <span></span>请选择支付方式
  </div>
  <div class="method_tab">
    <div *ngFor="let item of rechargeType" [ngClass]="{'active':item.type==defaultRechargeType}"
      (click)="onChangeRechargeType(item.type)">{{item.title}}</div>
  </div>
  <!-- <iframe id="iframe"
    sandbox="allow-scripts allow-top-navigation allow-pointer-lock allow-same-origin allow-popups allow-forms"
    [src]="url" height="100%" width="100%">
      </iframe> -->
  <div *ngIf="defaultRechargeType=='self'">
    <ion-list class="card-list-msg">
      <div class="account-list-card">  
        <span *ngFor="let item of selfList;let i=index" [ngClass]="{'active':recharegeIndex==i}"  (click)="onChangeAccount(i)" [innerHTML]="item.banknickname | html"></span>
      </div>
      <div class="tit-msg">
        <p>收款账户信息</p>
      </div>
      <ion-item>
        <ion-icon class="iconfont ion-ios-yinlian" style="font-size: 38px; color: #004f9c;" slot="start"></ion-icon>
        <ion-label>{{recharegeMsg.bankname}}</ion-label>
      </ion-item>
      <ion-item>
        <ion-icon class="iconfont ion-ios-yonghu" style="font-size: 34px; color: #004f9c;" slot="start"></ion-icon>
        <ion-label>{{recharegeMsg.name}}</ion-label>
        <ion-button shape="round" slot="end" (click)="onCopyCardNo(recharegeMsg.name)">复制</ion-button>
      </ion-item>
      <ion-item>
        <ion-icon class="iconfont ion-ios-yinhangqiahao" style="font-size: 34px; color: #004f9c;" slot="start">
        </ion-icon>
        <ion-label style="font-size: 12px;">{{recharegeMsg.cardno}}</ion-label>
        <ion-button shape="round" slot="end" (click)="onCopyCardNo(recharegeMsg.cardno)">复制</ion-button>
      </ion-item>
      <ion-item>
        <ion-icon class="iconfont ion-ios-dingwei" style="font-size: 34px; color: #004f9c;" slot="start"></ion-icon>
        <ion-label>{{recharegeMsg.branchname}}</ion-label>
        <ion-button shape="round" slot="end" (click)="onCopyCardNo(recharegeMsg.branchname)">复制</ion-button>
      </ion-item>
      <ion-item>
        <ion-icon class="iconfont ion-ios-weibiaoti-" style="font-size: 34px; color: #004f9c;" slot="start">
        </ion-icon>
        <ion-label>{{recharegeNote}}</ion-label>
        <ion-button shape="round" slot="end" (click)="onCopyCardNo(recharegeNote)">复制</ion-button>
      </ion-item>
      <div class="bz">备注：<span>限额({{recharegeMsg.min}}-{{recharegeMsg.max}})</span><p [innerHTML]="recharegeMsg.note | html"></p></div>
      <div class="tit-msg">
        <p>打款账户信息</p>
      </div>
      <ion-item>
        <ion-icon class="iconfont ion-ios-renminbi" style="font-size: 32px; color: #004f9c;" slot="start">
        </ion-icon>
        <ion-input style="--padding-start: 10px;" placeholder="请填写汇款金额" (ionBlur)="inputAccountMoneyVal()"
          (ionInput)="inputAccountMoneyVal()" [(ngModel)]="accountMoney"></ion-input>
      </ion-item>
      <ion-item>
        <ion-icon class="iconfont ion-ios-yonghu" style="font-size: 34px; color: #004f9c;" slot="start">
        </ion-icon>
        <ion-input style="--padding-start: 10px;" placeholder="请填写汇款姓名" [(ngModel)]="accountName2"></ion-input>
      </ion-item>
      <ion-item>
        <ion-icon class="iconfont ion-ios-yinhangqiahao" style="font-size: 34px; color: #004f9c;" slot="start">
        </ion-icon>
        <ion-input style="--padding-start: 10px;" placeholder="请填写汇款账号" (ionBlur)="inputAccountNoVal()"
          (ionInput)="inputAccountNoVal()" [(ngModel)]="accountNo"></ion-input>
      </ion-item>
      <ion-item>
        <ion-icon class="iconfont ion-ios-weibiaoti-" style="font-size: 34px; color: #004f9c;" slot="start">
        </ion-icon>
        <ion-input style="--padding-start: 10px;" placeholder="请填写附言" [(ngModel)]="accountNote"></ion-input>
      </ion-item>
      <ion-item>
        <ion-icon class="iconfont ion-ios-iconset0209" style="font-size: 30px; color: #004f9c;" slot="start">
        </ion-icon>
        <ion-datetime pickerFormat="YYYY-M-D" display-format="YYYY-MM-DD" min="2019-01-01" cancelText="取消" doneText="确认"
          [(ngModel)]="selectDate"></ion-datetime>
        <i class="empty_time" *ngIf="!selectDate">请选择打款时间</i>
      </ion-item>
    </ion-list>
    <div class="footer-btn" (click)="onRechargeFinish()">充值完成</div>
  </div>
  <div *ngIf="defaultRechargeType=='other'">
    <div class="money-select">
      <div class="input-contain">
        <div class="input-contain-m">
          <ion-icon class="iconfont  ion-ios-qian"
            style="font-size: 20px; color: #efb336; font-weight: bold; padding-bottom: 4px;"></ion-icon>
          <ion-input inputmode="numeric" placeholder="请输入充值金额" (ionBlur)="inputChangeVal()"
            (ionInput)="inputChangeVal()" [(ngModel)]="payNum"></ion-input>
        </div>

        <ion-grid *ngIf="!(inputArr | empty)">
          <ion-row>
            <ion-col size="4" *ngFor="let item of inputArr" (click)="onSelectDefaultVal(item)">
              <div class="inputText"> {{item}}元</div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </div>
    <div class="section-tit">
      <span></span>请选择打款方式
    </div>
    <div class="pay-method-list">
      <ion-list lines="full" style="margin-bottom: 0px; border-radius: 10px; color: #555555;">
        <div *ngFor="let item of wayList" class="father-item-contain">
          <ion-item (click)="toggleGroup(item)" class="father-item">
            <img slot="start" [src]="item.image" />
            <ion-label>
              <h2>{{item.name}}</h2>
            </ion-label>
            <ion-icon class="iconfont"
              [ngClass]="{'ion-ios-down-trangle':!isGroupShown(item),'ion-ios-down-trangle-copy':isGroupShown(item)}"
              slot="end" style="font-size: 18px; color: #C0C0C0;"></ion-icon>
          </ion-item>
          <div *ngIf="isGroupShown(item)" class="son-item-contain">
            <ion-item *ngFor="let itemSon of item.son_method" data-id="son-item-{{itemSon.id}}" class="son-item"
              [ngClass]="{'active':itemSon.active}" (click)="selectItem(itemSon,itemSon.id)">
              <img [src]="itemSon.iconimage" />
              <ion-label>
                <h2>{{itemSon.rename}}<span>(手续费:{{itemSon.rate}}%)</span></h2>
                <p [innerHTML]="itemSon.note | html"></p>
              </ion-label>
            </ion-item>
          </div>
        </div>
      </ion-list>
    </div>
    <div class="section-tit" *ngIf="isBankList">
      <span></span>银行
    </div>
    <ion-list lines="full" *ngIf="isBankList" style="margin-bottom: 0px; border-radius: 10px;">
      <ion-item style="color: #555555;">
        <ion-label>银行</ion-label>
        <ion-select placeholder="请选择银行" okText="确定" cancelText="取消" (ionChange)="selectBank()" [(ngModel)]="bankCode">
          <ion-select-option value="{{item.code}}" *ngFor="let item of bankListArr">{{item.name}}</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>
    <div class="section-tit" *ngIf="isBankList && isAccountName">
      <span></span>持卡人姓名
    </div>
    <ion-list lines="full" *ngIf="isBankList && isAccountName" style="border-radius: 10px; margin-bottom: 0px;">
      <ion-input style="--padding-start: 10px;" placeholder="请填写持卡人姓名" [(ngModel)]="accountName"></ion-input>
    </ion-list>
    <div class="section-tit" *ngIf="isBankList && isCardNo">
      <span></span>持卡人卡号
    </div>
    <ion-list lines="full" *ngIf="isBankList && isCardNo" style="border-radius: 10px;margin-bottom: 0px;">
      <ion-input style="--padding-start: 10px;" (ionBlur)="inputCardNoChangeVal()" (ionInput)="inputCardNoChangeVal()"
        placeholder="请填写持卡人卡号" [(ngModel)]="cardNo"></ion-input>
    </ion-list>
    <div class="footer-btn" (click)="onSubmitPay()">确认支付({{payNum}})元</div>
  </div>
</ion-content>
<div class="mark-contain" *ngIf="isMarkWin">
  <div class="m-contain-div">
    <div class="m-close-icon" (click)="onCloseMask();$event.stopPropagation">
      <ion-icon class="iconfont  ion-ios-delete" style="font-size: 30px"></ion-icon>
    </div>
    <div class="ewm-div" *ngIf="isEwm">
      <img [src]="ewmUrl" />
    </div>
  </div>
</div>

<app-tab-self></app-tab-self>